<template>
  <div class="app-container no-pagination">
    <div class="page-container-title">
      <img src="../../assets/page-title-icon/1.png" alt="">
      <span>辅助项核算</span>
    </div>
    <div class="filter-container">
      <div class="left-block">
        <span>启账日期：2019年</span>
        <el-select v-model="searchForm.month" style="width: 70px" size="small" class="theme-select">
          <el-option v-for="(item, index) in $MONTH_LIST" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
        <span>月 币别</span>
        <el-select v-model="searchForm.month" style="width: 70px" size="small" class="theme-select">
          <el-option v-for="(item, index) in $MONTH_LIST" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
        <el-checkbox v-model="noShowCount">隐藏数量</el-checkbox>
      </div>
      <div class="right-block">
        <el-input v-model="searchForm.keyword" style="width: 200px;margin-right: 10px" suffix-icon="el-icon-search" size="small" placeholder="科目编码/科目名称/摘要"/>
        <el-button type="primary" size="small">导出</el-button>
        <el-button type="primary" size="small">打印</el-button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card>
          <div slot="header" class="card-title-text">
            <span>辅助项明细</span>
          </div>
          <el-input v-model="filterText" placeholder="搜索辅助项名称/编码" size="small"/>
          <el-tree
            ref="tree"
            :data="data"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            default-expand-all/>
        </el-card>
      </el-col>
      <el-col :span="19" class="mini-container">
        <div class="table-title">辅助项核算</div>
        <el-table
          :data="tableData"
          :header-cell-style="{textAlign: 'center'}"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="科目编码"/>
          <el-table-column
            prop="date"
            label="科目名称"/>
          <el-table-column
            prop="date"
            label="余额方向"/>
          <el-table-column label="期初余额">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="本年借方累计">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="本年贷方累计">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
          <el-table-column label="年初余额">
            <el-table-column
              prop="name"
              label="数量"/>
            <el-table-column
              prop="name"
              label="金额"/>
          </el-table-column>
        </el-table>
        <div class="page-pagination">
          <pagination/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
function createSearchForm(tar) {
  let raw = {
    keyword: '',
    month: '1'
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
export default {
  name: 'SupplementaryItemAccounting',
  components: { Pagination },
  data() {
    return {
      searchForm: createSearchForm(),
      noShowCount: false,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  component: { Pagination },
  computed: {
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mini-container {
    min-height: calc(100vh - 160px);
  }
</style>
